<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>后台</title>

     <script src='/js/vue/vue.js'></script>
     <script src='/js/jquery.js'></script>
     <script src='/js/layer.js'></script>
</head>

<body>
<div id="right">
        <table width="100%"  border="0" cellspacing="0" cellpadding="0" style='background:white;'>
           <tr >
               <td class='td_text' style='text-align:left;text-indent:15px;color:#00a0d4;font-size:15px;'>添加品牌</td>
               <td class='td_html'></td>
          </tr>
          <tr>
               <td class='td_text'>品牌名称：</td>
               <td class='td_html'><input type='text' style='width:200px;height:30px;border:1px solid #ccc;' v-model='list.brand_name'/></td>
          </tr>
          <tr>
               <td class='td_text'>品牌图片：</td>
               <td class='td_html'>
                <form  enctype='multipart/form-data' target='a' id='uploadForm'>
                  <div><img :src='list.brand_img' width='140px' height='56px' style='border:1px solid #ccc;'/></div>
                  <div><input type="file" name="file" id='file' @change='getfile($event)'/></div>
                </form>
               </td>
          </tr>
          <tr style='height:110px;'>
               <td class='td_text'>品牌简介：</td>
               <td class='td_html'><textarea style='border:1px solid #ccc;width:40%;height:80px;' v-model='list.brand_introduction'></textarea></td>
          </tr>
          <tr>
            <td class='td_text'></td>
            <td class='td_html'><input type='button' class='tjbtn' value='提交' {if isset($row)}@click='brand_edit({$row.id})'{else}@click='brand_add()'{/if}/></td>
         </tr>
          <tr style='height:30px;box-shadow:-1px 4px 5px #ccc;'>
          </tr>
        </table>


</div>
</div>
</body>
</html>
<script>
window.num='';
   new Vue({
     el:"#right",
     data:{
        list:{
           brand_name:"{$row.brand_name | default=''}",
           brand_img:"{$row.brand_img | default='/image/file_img.jpg'}",
           brand_introduction:"{$row.brand_introduction | default=''}"
        }
     },methods:{
          getfile(event){
                 let self=this;
                 layer.msg('正在上传...', {time: 20000,icon:16});
         $.ajax({
                url: '/admin.php/brand/files',
                type: 'POST',
                cache: false,
                data: new FormData($('#uploadForm')[0]),
                processData: false,
                contentType: false,
                dataType:'json',
                 success:function(res){
                    if(res.status=='ok'){
                        layer.msg('上传成功！', {time: 1500,icon:1});
                       self.list.brand_img="/upload/"+res.file_url;
                      }else{
                         layer.msg('上传失败！', {time: 1500,icon:7});
                      }
                    }
                  });
          },brand_add(){
            let self=this;
             layer.msg('正在提交...', {time: 20000,icon:16});
             $.ajax({
               url:'/admin.php/brand/brand_save',
               dataType:'json',
               data:self.list,
               type:'post',
               success:function(res){
                 if(res.status=='ok'){
                        layer.msg('添加成功！', {time: 1500,icon:1});
                        setTimeout(function(){
                            parent.layer.closeAll();
                            parent.location.reload();
                        },1600);
                      }else{
                         layer.msg('添加失败！', {time: 1500,icon:7});
                      }
               }
             });
          },brand_edit(id){
            let self=this;
             layer.msg('正在提交...', {time: 20000,icon:16});
             $.ajax({
               url:'/admin.php/brand/brand_edit?id='+id,
               dataType:'json',
               data:self.list,
               type:'post',
               success:function(res){
                 if(res.status=='ok'){
                        layer.msg('编辑成功！', {time: 1500,icon:1});
                        setTimeout(function(){
                            parent.layer.closeAll();
                            parent.location.reload();
                        },1600);
                      }else{
                         layer.msg('编辑失败！', {time: 1500,icon:7});
                      }
               }
             });
          }
     }
   });
</script>
<style>
body{
 background:#f5f5f5;

}
a{text-decoration:none;}
   #right table tr{
    height: 50px;
    border:0px;
   }
  #right table tr .td_text,#right table tr .td_text2{
      font-size:15px;
      color:#666;
      text-align:right;
      width:15%;
   }
    #right table tr .td_html{
      font-size:15px;
      color:#666;
      width:85%;
   }
   #right table tr .td_html2{
    font-size:15px;
      color:#666;
      width:70%;
   }
   #right table tr .td_save2{
    font-size:15px;
      color:#666;
    width:15%;
   }
   .td_save2 img{
      cursor:pointer;
   }
   .tjbtn {
    background: #FF5722;
    width: 100px;
    height: 38px;
    text-align: center;
    line-height: 38px;
    border-radius: 2px;
    font-family: '微软雅黑';
    color: #fff;
    border: 0;
    font-size: 15px;
    cursor: pointer;
}
 #fabu{
      background: #09C878;
    padding: 0 10px 0 10px;
    color: #fff;
    float: right;
    margin: 8px 0px 10px 0;
    height: 26px;
    min-width: 26px;
    _width: 10px;
    line-height: 25px;
    border: 1px solid #00c874;
    border-radius: 18px;
    font-size: 12px
    }

      .tjbtn {
    background: #FF5722;
    width: 100px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    border-radius: 2px;
    font-family: '微软雅黑';
    color: #fff;
    border: 0;
    font-size: 15px;
    cursor: pointer;
}
</style>
